<!--
list
-->
<template>
    <div class="column-list">
        <li class="index-single index">
            <div class="sa-box">
                <router-link :to="{name:'column',params:{colId:item.id}}" class="single-activity"  v-for="item in list" :key="item.id" replace>
                    <img v-if="item.cover !=''" :src="picHead+item.poster" alt="">
                    <p class="omit2 name">{{item.name}} <i class="vip-only" v-if="!item.vipOnly">VIP</i></p>
                    <p class="omit slogan">{{item.slogan}}</p>
                    <div class="actbotline">
                        <span class="single-num" v-if="item.stopUpdate">共{{item.singleNum}}期</span>
                        <span class="single-num" v-else>已更新{{item.singleNum}}期</span>
                        <span v-if="!item.vipPrice" class="detail price-vip font1">¥{{item.vipPrice | moneyFormate}}<i class="vip-only" >VIP</i></span>
                        <span class="detail price-act font1">¥{{item.price | moneyFormate}}</span>
                    </div>
                </router-link>
            </div>
        </li>
    </div>
</template>

<script>
    export default {
        props: ['list'],
        data(){
            return{
                picHead : this.$store.state.picHead
            }
        },
        mounted() {
//            console.log(this.$props.actlist,'活动')
        },
        methods: {
        }

    }
</script>

<style lang="less">
    /* 热门活动模块 */
    .column-list{
        background:#fff;
        .sa-box {
            padding: 0 .426rem;
            box-sizing: border-box;
            .single-activity {
                display: inline-block;
                padding: .4rem 0;
                border-bottom: 1px solid #eee;
                width: 100%;
                .name {
                    margin-top: .28rem;
                    width: 100%;
                    font-size: .426rem;
                    line-height: .58rem;
                    color: #333333;
                    font-weight:600;
                }
                .slogan {
                    text-align: left;
                    margin: .1rem 0;
                    font-size: .3733rem;
                    color: #999;
                }
                img {
                     width: 100%;
                     height: 4.51rem;
                }
            }
            .single-activity:first-child {
                 padding-top: 0 !important;
             }
        }
        .vip-only{
            background: #333333;
            color: #E1B272;
            font-size: 10px;
            padding: 0 4px;
            margin-left: 2px;
        }
        .actbotline{line-height: .533rem;}
        .single-num{float:left;color:#999;font-size:.3733rem;}
        .address-act{
            float:left;
            display:inline-block;
            margin-left:.3733rem;
            width:4rem;
            text-overflow:ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .price-act{float:right;color:#20A0FF !important;font-size:.426rem !important;}
        .price-vip{float:right;color:#333 !important;font-size:.3733rem !important;padding-left:9px}


    }
</style>